import React, { Component } from 'react';
import { StickyContainer,Sticky } from 'react-sticky';
import {Header} from './header';
let renderCount = 0;

export default class StickyBar extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount(){

  }

  componentDidMount() {

  }

  componentWillUnmount(){

  }

  render() {
    return (
        <div>
            <h2>Content before the Sticky...</h2>
            <div
                className="gap short"
                style={{ background: "linear-gradient(#fff, #ddd)" }}
            />
                <StickyContainer className="container">
                <Sticky>
                    {({ style }) => (
                    <Header style={style} renderCount={renderCount++} />
                        // <div style={style}>header</div>
                    )}
                </Sticky>
                <h2 className="text-center">{"<StickyContainer />"}</h2>
                </StickyContainer>
                <div
                    className="gap tall"
                    style={{ background: "linear-gradient(#ddd, #fff)" }}
                >
                <h2>Content after the Sticky...</h2>
            </div>
        </div>
    );
  }
}